<template>
	<view>
		<template v-if="show">
			<image :src="url" @click="previewSqs(url)" :data-src="url"
				:class="imgVideoStyle === 'detail' ? 'imgVideoStyle' : imgVideoStyle === 'index' ? 'indexswipter' : ''">
			</image>
		</template>
		<template v-else>
			<video @fullscreenchange="fullscreenchangeHandler" @play="playSwiperVideoHandler"
				@pause="pauseSwiperVideoHandler" @ended="$emit('endedSwiperVideoEmitHandler')" :src="url"
				:class="imgVideoStyle === 'detail' ? 'imgVideoStyle' : imgVideoStyle === 'index' ? 'indexswipter' : ''"></video>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'VideoImg',
		props: {
			// 视频地址、图片地址
			url: {
				String,
				require: true
			},
			imgVideoStyle: {
				type: String,
				default: ''
			}
		},
		computed: {
			show() {
				let arr = this.url.split('.')
				if (arr[arr.length - 1] == 'mp4') {
					return false
				} else {
					return true
				}
			},
		},
		data() {
			return {}
		},
		methods: {
			// 图片点击事件
			previewSqs(current) {
				if (this.imgVideoStyle === 'index') return
				// console.log(current);
				uni.previewImage({
					current, // 图片的地址url
					urls: [current] // 预览的地址url
				})
			},
			playSwiperVideoHandler() {
				this.$emit('playSwiperVideoEmitHandler')
			},
			pauseSwiperVideoHandler() {
				this.$emit('pauseSwiperVideoEmitHandler')
			},
			fullscreenchangeHandler() {
				this.$emit('fullscreenchangeHandler')
			}
		}
	}
</script>

<style lang="scss" scoped>
	image,
	video {
		width: 210rpx;
		height: 210rpx;
		border-radius: 16rpx;
	}

	.imgVideoStyle {
		width: 100% !important;
		height: 750rpx !important;
		border-radius: 0 !important;
	}

	.indexswipter {

		width: 100% !important;
		height: 320rpx !important;
		border-radius: 0 !important;
	}
</style>